<template>
  <el-dialog
      title="个人信息"
      :visible.sync="dialogVisible"
      width="25%"
      :show-close="false"
      :modal-append-to-body="false"
      @open="handleOpen"
      @close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="头像" prop="avatar">
        <!--  上传图片      -->
        <UploadImage :avatar="avatar" @imageAvatarSuccess="uploadImage"/>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input
            placeholder="请输入姓名"
            v-model="ruleForm.name">
          <i slot="suffix"
             style="margin-top: 8px;font-size: 18px;"/>
        </el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
            placeholder="请输入手机号"
            v-model="ruleForm.phone">
          <i slot="suffix"
             style="margin-top: 8px;font-size: 18px;"/>
        </el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio v-model="ruleForm.sex" label="0">男</el-radio>
        <el-radio v-model="ruleForm.sex" label="1">女</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>


<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import {Form} from "element-ui";
import UploadImage from "@/components/ImgUpload/index.vue";
import {getUserInfo, updateUserInfo} from "@/api/user";

@Component({
  name: 'UserInfo',
  components: {UploadImage}
})
export default class index extends Vue {
  private dialogVisible = false
  private avatar = ''
  private uploadImage(newImage: string) {
    if (newImage) {
      this.avatar = newImage;
      this.$emit('imageAvatarSuccess', this.avatar)  // 子组件传值给父组件
    }
  }

  ruleForm = {
    name: '',
    phone: '',
    sex: '0',
  } as {
    name: string,
    phone: string,
    sex: string,
  }

  rules = {
    name: [
      {
        required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入用户名'))
          } else {
            callback();
          }
        }
      }
    ],
    phone: [
      {
        required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (value === '' || (!/^1[3-9]\d{9}$/.test(value))) {
            callback(new Error('请输入正确的手机号'))
          } else {
            callback()
          }
        }
      }
    ],
  }

  submitForm() {
    (this.$refs.ruleForm as Form).validate((valid) => {
      if (valid) {
        updateUserInfo(this.ruleForm).then(res => {
          if (res.data.code === 1) {
            this.$message.success("保存成功")
            this.dialogVisible = false
          }
        })
      }
    })
  }

  handleOpen() {
    getUserInfo().then(res => {
      if (res.data.code === 1) {
        this.ruleForm = res.data.data;
        this.avatar = res.data.data.avatar;
      }
    }).catch(err => {
      this.$message.error(err.message);
    })
  }

  handleClose() {
    this.dialogVisible = false;
    const form = this.$refs.ruleForm as Form;
    form.clearValidate();

    this.$emit('close');
  }

}
</script>


<style scoped lang="scss">

</style>
